// 定义开发路径
let devUrl = "./src";
// 通过结构赋值 引入 gulp API
let {src , dest , watch , series , parallel} = require('gulp');
// 引入sass
let sass = require('gulp-sass');
sass.compiler = require('node-sass');
// 2. 引入autoprefixer 
let autoprefixer = require('gulp-autoprefixer');
// 3. 引入browserSync
let browserSync = require('browser-sync').create();
// 4. 使用变量引用 reload 方法
let reload = browserSync.reload;
// 5. 引用 babel 转 js 压缩工具
let babel = require('gulp-babel');
let uglify = require('gulp-uglify');
// 6. 压缩图片cmd下载插件 cnpm i gulp-imagemin -D
let imagemin = require('gulp-imagemin');

// 开发环境将sass 编译成 css
function devSass() {
	return src(devUrl + '/scss/**/*.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(autoprefixer({
//			是否美化样式
            cascade: false
        }))
		.pipe(dest(devUrl + '/css'));
}

// 打包压缩css代码
function minCss(){
	return src( devUrl + '/css/**/*.css')
		.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
   		.pipe(dest('dist/css'));
}

// 转ES5 并压缩 js
function minJS(){
	return src( devUrl + '/js/**/*.js' )
			.pipe(babel({
            presets: ['@babel/env']
        }))
			.pipe(uglify({
//				是否忽略 console.*
				compress:{
					drop_console:true
				}
			}))
			.pipe(dest('dist/js'));
}	

// 压缩图片
function miniImg(){
    return src(devUrl + '/images/**/*.*')
        .pipe(imagemin())
        .pipe(dest('dist/img'))
};

// 开启静态服务器
 function browser() {
    browserSync.init({
        server: {
//      对应监听的根目录
            baseDir: devUrl,
        },
//      修改端口号
        port: 2091
    });
    watch(devUrl + '/css/**/*.css').on("change", reload);
    watch(devUrl + '/js/**/*.js').on("change", reload);
    watch(devUrl + '/**/*.html').on("change", reload);
    // 监听目录，调用对应任务
    watch(devUrl + '/scss/**/*.scss',devSass);
};

// 定义一个copy任务
async function copyTask(){
	// 复制html font
	src(devUrl + '/*.html').pipe(dest('dist/'));
	src(devUrl + '/font/*').pipe(dest('dist/font/'));
};
exports.copyTask = copyTask;

// 输出sass任务
exports.devSass = devSass;

// 输出浏览器任务
exports.dev = browser;

// 定义打包任务 压缩css 压缩图片
exports.build = series(devSass,minCss,miniImg,copyTask);

